<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="user-center.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item active" @click="goToPage('user-center')">个人中心</a>
                <a href="login.html" class="nav-item login-btn" @click="goToPage('login')">登录</a>
            </nav>
        </header>

        <main class="user-main">
            <div class="container">
                <div class="user-layout">
                    <!-- 侧边导航 -->
                    <aside class="user-sidebar">
                        <div class="user-card">
                            <img :src="userAvatar" :alt="user.name" class="user-avatar">
                            <h3>{{ user.name }}</h3>
                            <p>{{ user.email }}</p>
                        </div>
                        <nav class="user-nav">
                            <a href="#" class="nav-item" :class="{ active: currentView === 'profile' }"
                                @click.prevent="currentView = 'profile'">
                                <span class="nav-icon">👤</span>
                                个人资料
                            </a>
                            <a href="#" class="nav-item" :class="{ active: currentView === 'appointments' }"
                                @click.prevent="currentView = 'appointments'">
                                <span class="nav-icon">📅</span>
                                我的预约
                            </a>
                            <a href="#" class="nav-item" :class="{ active: currentView === 'settings' }"
                                @click.prevent="currentView = 'settings'">
                                <span class="nav-icon">⚙️</span>
                                账号设置
                            </a>
                        </nav>
                    </aside>

                    <!-- 主内容区 -->
                    <div class="content-main">
                        <!-- 个人资料 -->
                        <div v-if="currentView === 'profile'" class="profile-section">
                            <div class="section-header">
                                <h2>个人资料</h2>
                            </div>
                            <div class="profile-form">
                                <div class="avatar-section">
                                    <img :src="userAvatar" :alt="user.name" class="profile-avatar">
                                </div>
                                <div class="form-section">
                                    <div class="form-group">
                                        <label>姓名</label>
                                        <input type="text" v-model="user.name" placeholder="请输入姓名">
                                    </div>
                                    <div class="form-group">
                                        <label>性别</label>
                                        <select v-model="user.gender">
                                            <option value="male">男</option>
                                            <option value="female">女</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>手机号码</label>
                                        <input type="tel" v-model="user.phone" readonly disabled class="input-readonly"
                                            placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <label>电子邮箱</label>
                                        <input type="email" v-model="user.email" placeholder="请输入电子邮箱">
                                    </div>
                                    <div class="form-group">
                                        <label>出生日期</label>
                                        <input type="date" v-model="user.birthday">
                                    </div>
                                    <div class="form-group">
                                        <label>个人简介</label>
                                        <textarea v-model="user.bio" rows="4" placeholder="请输入个人简介"></textarea>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button class="save-btn" @click="saveProfile">保存修改</button>
                                </div>
                            </div>
                        </div>

                        <!-- 我的预约 -->
                        <div v-if="currentView === 'appointments'" class="appointments-section">
                            <div class="section-header">
                                <h2>我的预约</h2>
                                <div class="filter-options">
                                    <div class="filter-dropdown">
                                        <select v-model="appointmentFilter">
                                            <option value="all">全部预约</option>
                                            <option value="pending">待进行</option>
                                            <option value="completed">已完成</option>
                                            <option value="cancelled">已取消</option>
                                        </select>
                                        <span class="filter-icon">🔽</span>
                                    </div>
                                </div>
                            </div>

                            <div class="appointments-list" v-if="!loading">
                                <div v-if="error" class="error-message">{{ error }}</div>

                                <div v-else-if="filteredAppointments.length === 0" class="empty-message">
                                    {{ appointmentFilter === 'all' ? '暂无预约记录' : '没有符合条件的预约记录' }}
                                </div>

                                <div v-else v-for="appointment in displayedAppointments" :key="appointment.id"
                                    class="appointment-item">
                                    <div class="appointment-info">
                                        <div class="therapist-info">
                                            <img :src="appointment.therapistAvatar" :alt="appointment.therapistName">
                                            <div class="info">
                                                <h3>{{ appointment.therapistName }}</h3>
                                                <p>{{ appointment.therapistTitle }}</p>
                                            </div>
                                        </div>
                                        <div class="appointment-details">
                                            <p>预约时间：{{ appointment.date }} {{ appointment.time }}</p>
                                            <p>咨询方式：{{ appointment.type }}</p>
                                            <p>咨询地点：{{ appointment.location }}</p>
                                        </div>
                                        <div class="appointment-status">
                                            <span :class="['status-tag', appointment.status]">
                                                {{ appointment.statusText }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="appointment-actions" v-if="appointment.status === 'pending'">
                                        <button class="cancel-btn" @click="cancelAppointment(appointment.id)">
                                            取消预约
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div v-else class="loading-spinner">
                                加载中...
                            </div>

                            <!-- 分页组件 -->
                            <div class="pagination" v-if="pagination.total > 0">
                                <button class="page-btn" :disabled="pagination.currentPage === 1"
                                    @click="changePage(pagination.currentPage - 1)">
                                    上一页
                                </button>
                                <span class="page-info">
                                    第 {{ pagination.currentPage }} 页 / 共 {{ totalPages }} 页
                                </span>
                                <button class="page-btn" :disabled="pagination.currentPage >= totalPages"
                                    @click="changePage(pagination.currentPage + 1)">
                                    下一页
                                </button>
                            </div>
                        </div>

                        <!-- 账号设置 -->
                        <div v-if="currentView === 'settings'" class="settings-section">
                            <div class="section-header">
                                <h2>账号设置</h2>
                            </div>
                            <div class="settings-form">
                                <div class="form-section">
                                    <div class="form-group">
                                        <label>当前密码</label>
                                        <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入当前密码">
                                    </div>
                                    <div class="form-group">
                                        <label>新密码</label>
                                        <input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码">
                                    </div>
                                    <div class="form-group">
                                        <label>确认新密码</label>
                                        <input type="password" v-model="passwordForm.confirmPassword"
                                            placeholder="请再次输入新密码">
                                    </div>
                                    <div class="form-actions">
                                        <button class="save-btn" @click="changePassword">修改密码</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="js/user-center.js"></script>
</body>

</html>